import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { NavBar, Card, Tag, Divider } from 'antd-mobile';
import { ArrowsAltOutline, LockOutline, LinkOutline, UserOutline } from 'antd-mobile-icons';
import './ListItemDetail.scss';

interface ListItemDetailData {
  id: number;
  title: string;
  description: string;
  content: string;
  image?: string;
  tag?: string;
  date?: string;
  views?: number;
  author?: string;
  category?: string;
}

const ListItemDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  // 模拟详情数据
  const detailData: ListItemDetailData = {
    id: parseInt(id || '1'),
    title: '感冒的预防与治疗方法详解',
    description: '感冒是一种常见的上呼吸道感染疾病，了解其预防和治疗方法对健康管理至关重要。',
    content: `
      感冒是由多种病毒引起的上呼吸道感染，主要症状包括鼻塞、流涕、咳嗽、喉咙痛等。
      
      预防方法：
      1. 保持良好的个人卫生习惯
      2. 勤洗手，特别是在接触公共物品后
      3. 保持室内通风
      4. 适当运动，增强免疫力
      5. 注意保暖，避免受凉
      
      治疗方法：
      1. 充分休息，保证睡眠质量
      2. 多喝温水，保持水分摄入
      3. 适当使用对症药物缓解症状
      4. 如症状持续或加重，及时就医
      
      注意事项：
      - 感冒期间避免剧烈运动
      - 饮食宜清淡，多摄入维生素C
      - 避免吸烟和饮酒
      - 保持良好的心情状态
    `,
    image: '/api/placeholder/400/200',
    tag: '疾病预防',
    date: '2024-01-15',
    views: 12580,
    author: '张医生',
    category: '内科'
  };

  const handleBack = () => {
    navigate(-1);
  };

  const formatContent = (content: string) => {
    return content.split('\n').map((line, index) => {
      if (line.trim() === '') return <br key={index} />;
      if (line.startsWith('预防方法：') || line.startsWith('治疗方法：') || line.startsWith('注意事项：')) {
        return <h3 key={index} className="content-section-title">{line}</h3>;
      }
      if (line.match(/^\d+\./)) {
        return <p key={index} className="content-list-item">{line}</p>;
      }
      if (line.startsWith('-')) {
        return <p key={index} className="content-list-item">{line}</p>;
      }
      return <p key={index} className="content-paragraph">{line}</p>;
    });
  };

  return (
    <div className="list-item-detail-page">
      <NavBar 
        className="detail-header"
        onBack={handleBack}
        backArrow={<ArrowsAltOutline />}
      >
        详情
      </NavBar>
      
      <div className="detail-content">
        {/* 文章头部信息 */}
        <Card className="article-header">
          <div className="article-title">
            <h1>{detailData.title}</h1>
            <div className="article-meta">
              <Tag color="#1890ff" className="article-tag">
                {detailData.tag}
              </Tag>
              <span className="article-category">{detailData.category}</span>
            </div>
          </div>
          
          <div className="article-info">
            <div className="info-item">
              <UserOutline className="info-icon" />
              <span>{detailData.author}</span>
            </div>
            <div className="info-item">
              <LockOutline className="info-icon" />
              <span>{detailData.date}</span>
            </div>
            <div className="info-item">
              <LinkOutline className="info-icon" />
              <span>{detailData.views} 次浏览</span>
            </div>
          </div>
        </Card>

        {/* 文章图片 */}
        {detailData.image && (
          <Card className="article-image">
            <img src={detailData.image} alt={detailData.title} />
          </Card>
        )}

        {/* 文章描述 */}
        <Card className="article-description">
          <p className="description-text">{detailData.description}</p>
        </Card>

        <Divider />

        {/* 文章内容 */}
        <Card className="article-content">
          <div className="content-wrapper">
            {formatContent(detailData.content)}
          </div>
        </Card>

        {/* 相关推荐 */}
        <Card className="related-articles">
          <h3 className="related-title">相关文章</h3>
          <div className="related-list">
            <div className="related-item" onClick={() => navigate('/detail/2')}>
              <h4>发烧的正确处理方法</h4>
              <p>了解发烧的常见原因和正确的处理方法...</p>
            </div>
            <div className="related-item" onClick={() => navigate('/detail/3')}>
              <h4>咳嗽的缓解技巧</h4>
              <p>掌握有效的咳嗽缓解方法，改善生活质量...</p>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default ListItemDetail;
